<div class="plan">
    <div class="panel panel-default panel-xxx" ng-repeat="item in data.spec.plans" ng-class="{'active': grid.checked == $index}"  ng-click="grid.checked = $index">
        <div class="panel-heading">
            <span class="panel-title">{{item.name}}</span>
            <!--<button ng-if="!grid.update" class="btn btn-orange pull-right" ui-sref="console.apply_instance({name: data.metadata.name, plan: item.name})">申请实例</button>-->
            <button ng-if="data.biancheng" class="btn btn-orange pull-right" ui-sref="console.apply_instance({name: data.metadata.name, plan: item.name})">申请实例</button>
            <button ng-if="data.bianhui" class="btn btn-disabled pull-right" style='cursor:default;'>申请实例</button>

            <!--<button ng-if="grid.update" class="btn btn-orange pull-right" ui-sref="console.apply_instance({name: data.metadata.name, plan: item.name})">马上升级</button>-->
        </div>
        <div class="panel-body">
            <table class=""
                   style="border:0 none;padding:0px;margin:0px;width:100%;"
                   border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="col-md-5" style="border-right: 1px solid #c9c9c9;" valign="top">
                    <label>
                        <i class="faa faa-price">
                        </i>&nbsp;&nbsp;价格</label>
                    <p ng-show="item.free">Free</p>
                    <p ng-show="!item.free" ng-repeat="ct in item.metadata.costs">
                            {{ct.unit}}:<br/><!--€{{ct.amount.eur}}&nbsp;|&nbsp;${{ct.amount.usd}}-->
                            <i ng-repeat="(key, value) in ct.amount">
                            {{key}}: {{value}}<br/>
                            </i>
                    </p>
                </td>
                <td class="col-md-3" style="border-right: 1px solid #c9c9c9;" valign="top">
                    <label><i class="faa faa-content"></i>&nbsp;&nbsp;内容</label>
                    <p ng-repeat="bl in item.metadata.bullets">
                           {{bl}}
                    </p>
                </td>
                <td class="col-md-4" valign="top">
                    <label><i class="faa faa-description"></i>&nbsp;&nbsp;描述</label>
                    <p>{{item.description}}</p>
                </td>
            </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .btn.active, .btn:active {
        box-shadow: inset 0 0px 0px rgba(0,0,0,.125);
    }

</style>